<template>
  <div>
    <el-row style="justify-content: space-between">
      <p class="pinformation" style="margin-top: 7px">搜索条件</p>
    </el-row>
    <el-form label-width="80" ref="queryRef" :model="queryParams">
      <el-row>
        <el-col :span="4">
          <el-form-item label="方案编号：" prop="projectCode">
            <el-input
              maxlength="100"
              clearable
              placeholder="请输入方案编号"
              v-model="queryParams.projectCode"
              @keyup.enter="handleSeach"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="方案名称：" prop="projectName">
            <el-input
              maxlength="100"
              clearable
              placeholder="请输入方案名称"
              v-model="queryParams.projectName"
              @keyup.enter="handleSeach"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="委托单位：" prop="wtCustomName">
            <el-input
              maxlength="100"
              clearable
              placeholder="请输入委托单位"
              v-model="queryParams.wtCustomName"
              @keyup.enter="handleSeach"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="收样时间：">
            <el-date-picker
              v-model="dateRange"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="紧急类型：" prop="degree">
            <el-select
              v-model="queryParams.degree"
              placeholder="请选择紧急类型"
              clearable
              @change="handleSeach"
            >
              <el-option
                v-for="dict in proxy.addListNoLimit(sys_degree)"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3" style="padding-left: 10px;">
            <el-button type="success" @click="handleSeach">搜索</el-button>
            <el-button class="business resetBtn" @click="resetQuery"
              >重置</el-button
            >
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <p class="pinformation">质控批次列表</p>
      <p class="totalStyle">共 {{ total }} 条数据</p>
    </el-row>
    <el-table
      ref="mainTableRef"
      :data="sampleWithList"
      v-loading="loading"
      :row-class-name="tableRowClass"
      :row-style="rowStyle"
    >
      <el-table-column
        label="方案编号"
        align="center"
        prop="projectCode"
        width="130"
      />
      <el-table-column
        label="委托单位"
        align="center"
        prop="wtCustomName"
        width="250"
      />
      <el-table-column
        label="方案名称"
        align="center"
        prop="projectName"
        width="130"
      />
      <el-table-column
        label="批次序号"
        align="center"
        prop="withNumber"
        width="80"
      />
      <el-table-column label="采样人员" align="center" prop="cyUserName" />
      <el-table-column label="采样时间" align="center" width="280">
        <template #default="scope">
          {{ scope.row.cyStartDate }} - {{ scope.row.cyEndDate }}
        </template>
      </el-table-column>
      <el-table-column label="收样人" align="center" prop="getUserName" />
      <el-table-column label="收样时间" align="center" prop="getDate" />
      <el-table-column label="样品数量" align="center" prop="sampleCount" />
      <el-table-column label="操作" align="center" width="200">
          <template #default="scope">
            <el-button link type="success" @click="handleSample(scope.row)">查看样品</el-button>
          </template>
        </el-table-column>
    </el-table>
    <pagination
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <sampleView ref="sampleRef" @sampleClose="handleQuery()"></sampleView>
  </div>
</template>

<script setup>
import {
  getSampleWithList,
  submitQc
} from "@/api/sampleManage/sampleQc";
import sampleView from "./sampleView.vue";

const { proxy } = getCurrentInstance();
const {  sys_degree } = proxy.useDict(
  "sys_bzwz_type",
  "sys_bzwz_jcxm_type",
  "sys_degree"
);
const queryParams = ref({ pageNum: 1, pageSize: 10 });
const sampleWithList = ref([]);
const loading = ref(false);
const total = ref(0);
const heightBright = ref("");
const sampleRef = ref(null);

//定义参数 已经选中的ITEMID
const props = defineProps({
  isQc: {
    type: Number,
  },
});

function getList() {
  loading.value = true;
  heightBright.value = "";
  getSampleWithList(
    proxy.addDateRange(queryParams.value, dateRange.value)
  ).then((res) => {
    sampleWithList.value = res.rows;
    total.value = res.total;
    loading.value = false;
  });
}


function handleSample(row) {
  sampleRef.value.open = true;
  sampleRef.value.dialogTitle = '查看样品';
  sampleRef.value.withId = row.withId;
  sampleRef.value.isQc = props.isQc;
  nextTick(() => {
    sampleRef.value.handleQuery();
  });
}


function handleQuery() {
  queryParams.value.isQc = props.isQc;
  queryParams.value.pageNum = 1;
  getList();
}
function resetQuery() {
  proxy.resetForm("queryRef");
  dateRange.value = []
  handleQuery();
}

function tableRowClass({ row }) {
  if (row) {
    if (row.withId == heightBright.value) {
      return "current-row";
    }
    return "";
  }
}



const dateRange = ref([]);
function handleSeach() {
  queryParams.pageNum = 1;
  getList();
}

function rowStyle({ row }) {
  if (row.degree == 1) {
    return { color: "red" };
  }
}



const heightParams = ref([{ tableName: "main", bottomHeight:73 }]);
function getTableHeight() {
  proxy.adaptiveHeight(proxy, heightParams.value);
}

onMounted(() => {
  nextTick(() => {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  })
})
onUpdated(() => {
  nextTick(function () {
    getTableHeight();
  });
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", getTableHeight);
});

handleQuery();
</script>
